<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
  <script src="//bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=gpGbr1nxuPekgGKg0eC8LQhoWpkNgc8e"></script>
  <!-- <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.188/dist/mapvgl.threelayers.min.js"></script> -->
  <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
  <script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script> -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> -->
  <!-- <script type="module" src="./src/lib/gltf.js"></script> -->
  <title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="module">
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(121.075965,32.056276), 0);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	// map.setHeading(64.5); //旋转角度
	// map.setTilt(73);         //倾斜角度
  map.setMapType(BMAP_EARTH_MAP); // 设置为地球模式 BMAP_SATELLITE_MAP

  // 添加控件
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.addControl(zoomCtrl);
  var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
  map.addControl(cityCtrl);

  //监听级别，切换视图模式
  map.addEventListener('zoomend',function(){
    var currentZoom = map.getZoom(); 
    if (currentZoom > 8) {
        map.setMapType(BMAP_SATELLITE_MAP);
        console.log('satellite');
    } else {
        map.setMapType(BMAP_EARTH_MAP);
        console.log('earth');
    }
  });


// addOverlay();
addThreejsObj();

//添加threejs对象
function addThreejsObj(){
  var projection = mapvgl.MercatorProjection;
var point = projection.convertLL2MC(new BMapGL.Point(121.07535, 32.056743));
// var point2 = projection.convertLL2MC(new BMapGL.Point(116.493759,39.914972));

// map.centerAndZoom(new BMapGL.Point(116.403928,39.914972), 13);

map.enableKeyboard();
map.enableScrollWheelZoom();
map.enableInertialDragging();
map.enableContinuousZoom();

var view = new mapvgl.View({
    map: map
});

var threeLayer = new mapvgl.ThreeLayer();
view.addLayer(threeLayer);

var geometry = new THREE.BoxGeometry(5500, 5500, 5000);
var material =  new THREE.MeshBasicMaterial( { color: 0xff0000, flatShading: true, wireframe: false } );
var cube = new THREE.Mesh(geometry, material);
cube.position.x = point.lng;
cube.position.y = point.lat; 
cube.position.z = 2;
threeLayer.add(cube);

// const loader = new GLTFLoader();

}


function addOverlay(){
  //添加overlay
var vertices = [
    new BMapGL.Point(121.07535, 32.056743), // 顶点1
    new BMapGL.Point(121.077321, 32.056819), // 顶点2
    new BMapGL.Point(121.077461, 32.056681), // 顶点3
    new BMapGL.Point(121.077474, 32.05574),  // 顶点4
    new BMapGL.Point(121.075395, 32.055683), // 顶点5
    new BMapGL.Point(121.07535, 32.056743)   // 回到顶点1，闭合多边形
];

// 创建3D棱柱
var prism = new BMapGL.Prism(vertices, 100, {
    topFillColor: '#5679ea',    // 顶部填充颜色
    topFillOpacity: 0.6,        // 顶部填充透明度
    sideFillColor: '#5679ea',   // 侧面填充颜色
    sideFillOpacity: 0.9        // 侧面填充透明度
});
map.addOverlay(prism);

// 绑定鼠标事件
var events = ['click', 'mouseover', 'mouseout'];
for (let i = 0; i < events.length; i++) {
    prism.addEventListener(events[i], e => {
        switch (events[i]) {
            case 'click':
                alert('办公地点');
                break;
            case 'mouseover':
                e.target.setTopFillColor('#475fab'); // 鼠标悬停时改变顶部颜色
                e.target.setTopFillOpacity(1);       // 鼠标悬停时改变顶部透明度
                break;
            case 'mouseout':
                e.target.setTopFillColor('#5679ea'); // 鼠标移出时恢复顶部颜色
                e.target.setTopFillOpacity(0.6);     // 鼠标移出时恢复顶部透明度
                break;
        }
    });
}

}




//官方实例
// var bd1 = new BMapGL.Boundary();
// bd1.get('北京市', function (rs) {
//     let count = rs.boundaries.length;

//     console.log(rs.boundaries);

//     for (let i = 0; i < count; i++) {
//         let path = [];
//         let str = rs.boundaries[i].replace(' ', '');
//         let points = str.split(';');
//         for (let j = 0; j < points.length; j++) {
//             let lng = points[j].split(',')[0];
//             let lat = points[j].split(',')[1];
//             path.push(new BMapGL.Point(lng, lat));
//         }
//         let prism = new BMapGL.Prism(path, 5000, {
//             topFillColor: '#5679ea',
//             topFillOpacity: 0.6,
//             sideFillColor: '#5679ea',
//             sideFillOpacity: 0.9
//         });
//         map.addOverlay(prism);

//         // 绑定鼠标事件
//         var events = ['click', 'mouseover', 'mouseout'];
//         for (let i = 0; i < events.length; i++) {
//             prism.addEventListener(events[i], e => {
//                 switch (events[i]) {
//                     case 'click':
//                         alert('北京市');
//                         break;
//                     case 'mouseover':
//                         e.target.setTopFillColor('#475fab');
//                         e.target.setTopFillOpacity(1);
//                         break;
//                     case 'mouseout':
//                         e.target.setTopFillColor('#5679ea');
//                         e.target.setTopFillOpacity(0.5);
//                         break;
//                 }
//             }); 
//         }
//     }
// });
</script>
